<template>
  <div class="config-info-container">
    <el-page-header @back="goBack" content="通道费发票配置"></el-page-header>
    <!-- 新增发票 -->
    <div class="config-btn-wrapper g-flex-sb">
      <div class="title">发票信息</div>
      <el-button class="btn" size="mini" icon="el-icon-plus" @click="addInvoice('add')">新增发票信息</el-button>
    </div>
    <!-- 发票信息 -->
    <div class="invoice-info-wrapper" v-for="item in invoiceArr" :key="item.id">
      <el-row class="g-flex-c" style="height:100%">
        <el-col :span="10" class="g-flex-column info-box">
          <div class="info-item">
            <span class="label">开票抬头：</span>
            <span class="info">{{item.sellerName}}</span>
          </div>
          <div class="info-item">
            <span class="label">地址和电话：</span>
            <span class="info">{{item.sellerAddressPhone}}</span>
          </div>
        </el-col>
        <el-col :span="10" class="g-flex-column info-box">
          <div class="info-item">
            <span class="label">纳税人识别号：</span>
            <span class="info">{{item.sellerTaxNo}}</span>
          </div>
          <div class="info-item">
            <span class="label">开户行和账号：</span>
            <span class="info">{{item.sellerBankAccount}}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-button size="mini" @click="addInvoice('update',item)">编辑</el-button>
            <el-button size="mini" @click="deleteInvoiceOrAddress('invoice',item.id)">删除</el-button>
          </div>
        </el-col>
        <div class="info-default" v-show="item.type === 0">
          <div class="default-title">默认</div>
          <div class="default-triangle"></div>
        </div>
      </el-row>
    </div>
    <!-- 新增邮寄 -->
    <div class="config-btn-wrapper g-flex-sb">
      <div class="title">收件信息</div>
      <el-button class="btn" size="mini" icon="el-icon-plus" @click="addAddress">新增邮寄地址</el-button>
    </div>
    <!-- 邮寄地址 -->
    <div class="invoice-info-wrapper" v-for="item in addressArr" :key="item.id">
      <el-row class="g-flex-c" style="height:100%">
        <el-col :span="10" class="g-flex-column info-box">
          <div class="info-item">
            <span class="label">收件人：</span>
            <span class="info">{{item.addressee}}</span>
          </div>
          <div class="info-item">
            <span class="label">收件地址：</span>
            <span class="info">{{item.addresseeAddress}}</span>
          </div>
        </el-col>
        <el-col :span="10" class="g-flex-column info-box">
          <div class="info-item">
            <span class="label">收件电话：</span>
            <span class="info">{{item.addresseePhone}}</span>
          </div>
          <div class="info-item">
            <span class="label">收件邮箱：</span>
            <span class="info">{{item.email}}</span>
          </div>
        </el-col>
        <el-col :span="4" class="info-btns">
          <div>
            <el-button size="mini" @click="addAddress('update',item)">编辑</el-button>
            <el-button size="mini" @click="deleteInvoiceOrAddress('address',item.id)">删除</el-button>
          </div>
        </el-col>
        <div class="info-default" v-show="item.type === 0">
          <div class="default-title">默认</div>
          <div class="default-triangle"></div>
        </div>
      </el-row>
    </div>

    <!-- 发票新增编辑 -->
    <invoice-info v-if='invoiceData' :data="invoiceData" @close="invoiceData='';getAllInvoice()"></invoice-info>
    <!-- 邮寄信息新增编辑 -->
    <address-info v-if='addressData' :data="addressData" @close="addressData='';getAllAddress()"></address-info>
  </div>
</template>
<script>
import InvoiceInfo from './invoiceInfo'
import AddressInfo from './addressInfo'
import { deleteInvoiceInfoApi, deleteInvoiceAddressApi, getAllInvoiceInfoApi, getAllInvoiceAddressApi } from '@/api/finance'
export default {
  // name: 'invoice_invoiceConfig',
  components:{
    InvoiceInfo,
    AddressInfo
  },
  data () {
    return {
      invoiceData:'',
      addressData:'',
      invoiceArr:[],
      addressArr:[]
    } 
  },
  created () {
    this.initPage()
  },
  methods:{
    initPage(){
      this.getAllInvoice()
      this.getAllAddress()
    },
    //获取发票信息
    async getAllInvoice(){
      try{
        const {code, result = []} = await getAllInvoiceInfoApi()
        if( code !==200 ) return
        this.invoiceArr = result || []
      }catch(e){
        console.log(e)
      }
    },
    //获取邮寄地址
    async getAllAddress(){
      try{
        const {code, result = []} = await getAllInvoiceAddressApi()
        if( code !==200 ) return
        this.addressArr = result || []
      }catch(e){
        console.log(e)
      }
    },
    //新增发票
    addInvoice (flag, row) {
      if(flag === 'update'){
        const {id, sellerName, sellerBankAccount, sellerTaxNo, sellerAddressPhone, type} = row
        this.invoiceData = {id, sellerName, sellerBankAccount, sellerTaxNo, sellerAddressPhone, isDefault: type===0?true:false}
        return
      }
      if(this.invoiceArr && this.invoiceArr.length === 5){
        this.$message.warning('最多可以保存5条发票信息');
      }else{
        this.invoiceData = {}
      }
    },
    //新增地址
    addAddress(flag, row){
      if(flag === 'update'){
        const { id, addressee, addresseePhone, addresseeAddress, email, type } = row
        this.addressData = { id, addressee, addresseePhone, addresseeAddress, email, isDefault: type===0?true:false } 
        return
      }
      if(this.invoiceArr && this.addressArr.length === 5){
        this.$message.warning('最多可以保存5条地址信息');
      }else{
        this.addressData = {}
      }
    },
    // 删除 发票 ｜地址
    deleteInvoiceOrAddress (flag = 'invoice', id){
      this.$confirm(flag==='invoice'?'确认要删除该发票信息吗?':'确认要删除该邮寄地址吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = {}
        if(flag === 'invoice'){
          res = await deleteInvoiceInfoApi({id})
        }else{
          res = await deleteInvoiceAddressApi({id})
        }
        if(res.code !== 200) return
        this.$message.success('已删除')
        if(flag === 'invoice'){
          this.getAllInvoice()
        }else{
          this.getAllAddress()
        }
      }).catch((e) => {
        console.log(e)       
      })
    },
    //返回
    goBack(){
      this.$router.push({path:'/invoice/channelInvoice'})
    }
  }
}
</script>
<style lang="less" scoped>
.config-info-container{
  margin-top: 30px;
}
.config-btn-wrapper{
  margin: 15px 0 15px 5px;
  .title{
    border-left: 3px solid #4B7EFE;
    padding-left: 6px;
  }
  .btn{
    color: #4B7EFE;
  }
}
.invoice-info-wrapper{
  height: 114px;
  background-color: #FFFFFF;
  font-size: 12px;
  padding: 15px 30px 15px;
  margin-bottom: 8px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px rgba(220,220,220,0.5);
  .index{
    font-size: 14px;
    color: #666;
  }
  .info-box{
    height: 100%;
    justify-content: space-around;
  }
  .info-item {
    height: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 5px 0;
    .label {
      width: 75px;
      text-align: left;
      color: #A6A6A6;
      white-space: nowrap;
      margin-right: 2px;
    }
    .info {
      color: #222222;
      word-break: break-all;
      padding: 0 5px;
    }
  }
}
.info-default{
  width: 55px;
  height: 55px;
  position: absolute;
  top: -15px;
  right: -30px;
  font-size: 12px;
  color: #FFFFFF;
  .default-title{
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 3;
  }
  .default-triangle{
    width: 0;
    height: 0;
    border-top: 52px solid  #FA6400;
    border-left: 52px solid transparent; 
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
}
.back-link{
  margin-top: 10px;
}
/deep/ .el-page-header__left {
    color: #4B7EFE;
}
</style>